<template>
  <div class="pwdback">
    <head_><h1>注册</h1></head_>

    <div class="inp">
      <label for="phone">手机号</label>
      <input
        type="text"
        placeholder="请输入手机号"
        id="phone"
        v-model="phone"
        @blur="changepin"
      />
    </div>

    <div class="pin">
      <label for="pin">验证码</label>
      <input v-model="pin" type="text" placeholder="请输入验证码" id="pin" />
      <button
        :class="[pincolor === true ? 'button_active' : '']"
        id="yzm"
        @click="getpin"
        :disabled="bool"
      >
        {{ pintext }}
      </button>
    </div>

    <div class="inp">
      <label for="newpwd">新密码</label>
      <input
        v-model="pw"
        :type="flas ? tests : pass"
        placeholder="请输入密码"
        id="newpwd"
      />
      <van-icon
        @click="eye_active"
        :class="flas ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="inp">
      <label for="sure">确认</label>
      <input
        :type="flas2 ? tests : pass"
        v-model="surepw"
        placeholder="再次输入密码"
        id="sure"
      />
      <van-icon
        @click="eye_active2"
        :class="flas2 ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="submit">
      <button
        @click="submit"
        :disabled="submitdisplay"
        :class="[submitcolor == true ? 'submit_active' : '']"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script>
import head_ from "../jingtai_/header";
import {
  getCode,
  register,
  checkPhoneNumUnique,
} from "../../request/login_register/login_register";
export default {
  props: {},
  data() {
    return {
      phone: "",//手机号输入绑定
      pin: "",//验证码
      pw: "",
      surepw: "",
      pintext: "获取验证码",
      pincolor: false,//能否获取验证码
      timerid: null,
      time: 0,
      flas: false,
      pass: "password",
      tests: "text",
      flas2: false,
      ycode:'',

      submitdisplay: false,
      submitcolor: true,
      regphone: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,//正则表达式判断是否为手机号
      regpw: /^\w{6,12}$/,
      bool: true,
    };
  },

  methods: {
    //输入手机号后移动鼠标发生事件
    changepin() {
      this.bool = false;
      //判断手机号是否为空，
      if (!this.phone.trim()) {
        this.phone = "";
        return;
      }else{
        //电话号码为唯一性校验，如果数据库中有此手机号则进行报错手机号已注册
        checkPhoneNumUnique({ phone: this.phone }).then((res) => {
          if (res.code===5000) {
            this.$toast.fail("手机号已注册");
            this.phone = "";
          }else{
            this.pincolor = true;
          }
        });
      }
    },

    // 获取验证码按钮方法
    getpin() {
      //判断是否是手机号
      if (this.regphone.test(this.phone) === false) {
        this.$toast.fail("请输入正确的手机号");
        return;
      }else{
        //函数，获取验证码，如果超时则会从新
        getCode({ phone: this.phone }).then((res) => {
          if (res.code === 2000) {
            this.ycode=res.data
            clearInterval(this.timerid);
            this.time = 60;
            this.pintext = `重新获取(${this.time})`;
            this.timerid = setInterval(() => {
              this.time--;
              this.pintext = `重新获取(${this.time})`;
              if (this.time <= 0) {
                this.time = 60;
                clearInterval(this.timerid);
                this.pintext = "获取验证码";
              }
            }, 1000);
          } else {
            alert(res.msg)
          }
        });
      }
    },

    eye_active() {
      this.flas = !this.flas;
    },

    eye_active2() {
      this.flas2 = !this.flas2;
    },

    // 表单验证
    submit() {
      if (this.regphone.test(this.phone) === false) {
        this.$toast.fail("请输入正确的手机号");
      } else if (this.pin.length !== 4) {
        this.$toast.fail("验证码必须六位数字");
      } else if (this.regpw.test(this.pw) === false) {
        this.$toast.fail("密码格式不正确");
      } else if (this.pw !== this.surepw) {
        this.$toast.fail("两次密码输入不一致");
      } else if (this.pin !== this.ycode) {
        this.$toast.fail("验证码错误");
      } else {
        register({
          phoneNum: this.phone,
          password: this.pw,
        }).then((res) => {
          if (res.code === 2000) {
              this.$toast.success({
                date: "注册成功",
                duration: 2000,
                onClose: (res) => {
                  return this.$router.push("/login");
                },
              });
            } else {
            this.$toast.fail(res.date);
          }
        });
      }
    },

  },

  components: { head_ },
};
</script>

<style scoped lang="less">
.pwdback {
  padding: 0 0.24rem;
  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
  }
  span {
    flex: 1;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }
    .eye_active {
      color: #2094ff;
    }
  }

  .pin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input {
      width: 2.98rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      margin-left: 0.2rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    button {
      width: 2rem;
      height: 0.66rem;
      font-size: 0.22rem;
      color: #999;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 0.66rem;
      outline: none;
      border: none;
    }
    .button_active {
      background: #43a5ff;
      color: #fff;
    }
  }
  .submit {
    margin-top: 1.29rem;
    text-align: center;
    button {
      width: 5rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }
    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
